<template>
  <div class="tabbar" :class="{ fold: HomeSettingStore.fold ? true : false }">
    <div class="tabbar_left">
      <el-icon style="margin-right: 10px" @click="changeIcon">
        <component :is="HomeSettingStore.fold ? 'Fold' : 'Expand'"></component>
      </el-icon>
      <!-- 左侧面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <!-- 动态展示路由名字与标题 -->
        <el-breadcrumb-item
          v-for="(item, index) in $route.matched"
          :key="index"
          v-show="item.meta.title"
          :to="item.path"
        >
          <el-icon style="margin: 0 2px">
            <component :is="item.meta.icon"></component>
          </el-icon>
          <span>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 按钮 -->
    <div class="tabbar_right">
      <el-button
        style="background-color: royalblue"
        type="primary"
        size="small"
        :icon="Refresh"
        circle
        @click="updateRefresh"
      ></el-button>
      <el-button
        style="background-color: royalblue"
        type="primary"
        size="small"
        :icon="FullScreen"
        circle
        @click="fullScreen"
      ></el-button>
      <!-- popover弹出框 -->
      <el-popover
        class="box-item"
        title="主题设置"
        content="Bottom Center prompts info"
        placement="bottom"
        width="300px"
        height="600px"
      >
        <el-form>
          <el-form-item label="主题颜色">
            <!-- 取色器 -->
            <el-color-picker
              @blur="setColor"
              v-model="color"
              size="small"
              show-alpha
              :predefine="predefineColors"
            />
          </el-form-item>
          <el-form-item label="暗黑模式">
            <!-- 开关 -->
            <el-switch
              @change="changeDark"
              size="small"
              v-model="dark"
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              inline-prompt
              active-icon="MoonNight"
              inactive-icon="Sunny"
            />
          </el-form-item>
        </el-form>
        <template #reference>
          <el-button
            style="background-color: royalblue"
            type="primary"
            size="small"
            :icon="Setting"
            circle
          ></el-button>
        </template>
      </el-popover>

      <img
        :src="userStore.avatar"
        style="width: 20px; height: 20px; border-radius: 50%"
        alt=""
      />
      <!-- 下拉菜单 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userStore.username }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup name="Tabbar">
import { ref } from 'vue'
import {
  ArrowRight,
  FullScreen,
  Refresh,
  Setting,
} from '@element-plus/icons-vue'
//引入home配置的小仓库
import useHomeSettingStore from '@/store/setting'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
let userStore = useUserStore()
let HomeSettingStore = useHomeSettingStore()
//获取路由对象
let $route = useRoute()
//获取路由器对象
let $router = useRouter()
let dark = ref(false)
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
  '#ff4500',
  '#ff8c00',
  '#ffd700',
  '#90ee90',
  '#00ced1',
  '#1e90ff',
  '#c71585',
  'rgba(255, 69, 0, 0.68)',
  'rgb(255, 120, 0)',
  'hsv(51, 100, 98)',
  'hsva(120, 40, 94, 0.5)',
  'hsl(181, 100%, 37%)',
  'hsla(209, 100%, 56%, 0.73)',
  '#c7158577',
])
//点击图标的方法
function changeIcon() {
  HomeSettingStore.fold = !HomeSettingStore.fold
}
function updateRefresh() {
  HomeSettingStore.Refresh = !HomeSettingStore.Refresh
}
function fullScreen() {
  //DOM对象的一个属性：可以用来判断当前是不是全屏模式
  let full = document.fullscreenElement
  if (!full) {
    //通过文档根节点requestFullscreen方法实现全屏模式
    document.documentElement.requestFullscreen()
  } else {
    //再次点击退出全屏模式
    document.exitFullscreen()
  }
}
//退出登录
function logout() {
  //1.点击退出登录需要向服务器发请求【退出登录接口】
  //2.其次仓库中关于用户相关的数据要清空
  //3.跳转到登录界面
  //4.重新登录能回到原页面，使用query参数
  userStore.logout()
  $router.push({ path: '/login', query: { redirect: $route.path } })
  //退出登录时自动刷新
  window.location.reload()
}
//暗黑模式切换
function changeDark() {
  //获取html根节点
  let html = document.documentElement
  //判断根节点是否有类型dark
  dark.value ? (html.className = 'dark') : (html.className = '')
}
//主题颜色的设置
function setColor() {
  const html = document.documentElement
  html.style.setProperty('--el-color-primary', color.value)
}
</script>

<style scoped lang="scss">
.tabbar {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: rgb(153, 215, 215);
  .tabbar_left {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
  .tabbar_right {
    display: flex;
    align-items: center;
    margin-right: 20px;
    img {
      margin: 0 10px;
    }
  }
}
</style>
